<!-- src/components/class-center/NoticeDetail.vue -->
<template>
  <div class="notice-detail">
    <!-- 通知头部信息 -->
    <div class="notice-header">
      <div class="notice-meta">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="meta-item">
              <span class="meta-label">发布人：</span>
              <span class="meta-value">{{ notice.senderName }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="meta-item">
              <span class="meta-label">通知类型：</span>
              <el-tag :type="getTypeTagType(notice.typeName)">
                {{ notice.typeName }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="meta-item">
              <span class="meta-label">发布时间：</span>
              <span class="meta-value">{{ formatDateTime(notice.createTime) }}</span>
            </div>
          </el-col>
        </el-row>

        <!-- 接收对象信息（仅发布者查看时显示） -->
        <div v-if="tabType === 'published'" class="recipient-info">
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="meta-item">
                <span class="meta-label">接收对象：</span>
                <span class="meta-value">{{ notice.recipientInfo }}</span>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 阅读统计（仅发布者查看时显示） -->
        <div v-if="tabType === 'published'" class="read-statistics">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="meta-item">
                <span class="meta-label">阅读状态：</span>
                <span class="meta-value">
                  {{ notice.readCount }}/{{ notice.totalRecipients }} 已读
                </span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="meta-item">
                <span class="meta-label">阅读进度：</span>
                <el-progress
                    :percentage="calculateReadPercentage(notice.readCount, notice.totalRecipients)"
                    :stroke-width="8"
                    style="width: 120px;"
                />
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <!-- 通知描述 -->
    <div v-if="notice.description" class="notice-description">
      <h4>通知描述</h4>
      <div class="description-content">
        {{ notice.description }}
      </div>
    </div>

    <!-- 通知正文 -->
    <div class="notice-content">
      <h4>通知正文</h4>
      <div class="content-text">
        <pre>{{ notice.content }}</pre>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button @click="handleClose">关闭</el-button>
      <el-button
          v-if="tabType === 'published'"
          type="primary"
          @click="handleEdit"
      >
        编辑
      </el-button>
      <el-button
          v-if="tabType === 'published'"
          type="danger"
          @click="handleDelete"
      >
        删除
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// Props
interface Props {
  notice: any
  tabType: string
}

const props = defineProps<Props>()
const emit = defineEmits(['close', 'edit', 'delete'])

// 计算属性
const readPercentage = computed(() => {
  if (!props.notice.totalRecipients || props.notice.totalRecipients === 0) {
    return 0
  }
  return Math.round((props.notice.readCount / props.notice.totalRecipients) * 100)
})

// 方法
const getTypeTagType = (typeName: string) => {
  const typeMap: { [key: string]: string } = {
    '课程通知': 'primary',
    '考试通知': 'warning',
    '活动通知': 'success',
    '系统通知': 'info',
    '紧急通知': 'danger'
  }
  return typeMap[typeName] || 'info'
}

const formatDateTime = (dateTime: string) => {
  return new Date(dateTime).toLocaleString('zh-CN')
}

const calculateReadPercentage = (readCount: number, totalRecipients: number) => {
  if (!totalRecipients || totalRecipients === 0) return 0
  return Math.round((readCount / totalRecipients) * 100)
}

const handleClose = () => {
  emit('close')
}

const handleEdit = () => {
  emit('edit', props.notice)
}

const handleDelete = async () => {
  try {
    await ElMessageBox.confirm(
        `确定要删除通知"${props.notice.title}"吗？`,
        '删除确认',
        {
          app: undefined,
          components: undefined,
          config: undefined,
          directives: undefined,
          mixins: [],
          provides: undefined,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
    )
    emit('delete', props.notice.noticeId)
  } catch (error) {
    console.log('取消删除')
  }
}
</script>

<style scoped>
.notice-detail {
  padding: 0;
}

.notice-header {
  margin-bottom: 24px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #409EFF;
}

.meta-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.meta-label {
  font-weight: 600;
  color: #606266;
  min-width: 80px;
}

.meta-value {
  color: #303133;
}

.recipient-info,
.read-statistics {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #e4e7ed;
}

.notice-description {
  margin-bottom: 24px;
  padding: 16px;
  background-color: #f0f9ff;
  border-radius: 8px;
  border-left: 4px solid #91d5ff;
}

.notice-description h4 {
  margin: 0 0 12px 0;
  color: #1890ff;
  font-size: 16px;
}

.description-content {
  color: #595959;
  line-height: 1.6;
}

.notice-content {
  margin-bottom: 24px;
  padding: 16px;
  background-color: #f6ffed;
  border-radius: 8px;
  border-left: 4px solid #b7eb8f;
}

.notice-content h4 {
  margin: 0 0 12px 0;
  color: #52c41a;
  font-size: 16px;
}

.content-text {
  color: #303133;
  line-height: 1.8;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.content-text pre {
  margin: 0;
  font-family: inherit;
  white-space: pre-wrap;
}

.action-buttons {
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid #e4e7ed;
}
</style>
